<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <!--表单提交默认行为时跳转走,禁用默认用为-->
    <form @submit.prevent="demo">
      账号:<input type="text" v-model.trim="userInfo.account"><br/><br/>
      密码:<input type="password" v-model="userInfo.password"><br/><br/>
      年龄:<input type="number" v-model.number="userInfo.age"><br/><br/>
      性别:男<input type="radio" v-model="userInfo.sex" value="male">女:<input type="radio" v-model="userInfo.sex" value="female"><br/><br/>
      爱好:学习<input type="checkbox" value="study" v-model="userInfo.hobby">打游戏<input type="checkbox" value="game" v-model="userInfo.hobby">吃饭<input type="checkbox" value="eat" v-model="userInfo.hobby"><br/><br/>
      所属地区:
      <select v-model="userInfo.city">
        <option valu="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guanghzou">广州</option>
        <option value="shenzhen">深圳</option>
      </select><br/><br/>
      其他信息:<textarea v-model="userInfo.other"></textarea><br/><br/>
      <input type="checkbox" v-model.lazy="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
      <!--button点击时.默认提交表单-->
      <button>提交</button>
    </form>
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:'#root',
      data:{
        userInfo:{
          account:'',
          password:'',
          sex:'female',
          hobby:[],
          city:'',
          other:'',
          agree:false
        }
      },
      methods:{
        demo(){
          console.log(JSON.stringify(this.userInfo))
        }
      }
    });
  </script>
</body>
</html>
